<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* css reset 开始 */
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/* css reset 结束 */
			
			/* 公共样式 开始 */
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			/* 公共样式 结束 */
			
			/* 头部样式 开始 */
			#head .headMain{width: 1100px;height: 80px; background: pink;margin: 0 auto;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li {float: left; margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li > a > .up {color: black;position: absolute;width: 0;overflow: hidden;transition: 1s width;}
			#head .headMain > .nav > .list > li:hover .up {width: 100%;}
			/* 头部样式 结束 */
		</style>
	</head>
	<body>
		<!-- section用来充当视口的 -->
		<section id="wrap">
			<!-- 流体布局 -->
			<header id="head">
				<!-- 固定布局 -->
				<div class="headMain">
					<!-- logo -->
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png" >
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png" ></div>
									<div class="down"><img src="img/home.png" ></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
								
					<div class="arrow"></div>
				</div>
				
				
			</header>
		</section>
	</body>
</html>
